<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #app {
        width: 600px;
        margin: 10px auto;
      }

      .tb {
        border-collapse: collapse;
        width: 100%;
      }

      .tb th {
        background-color: #0094ff;
        color: white;
      }

      .tb td,
      .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <table class="tb">
        <thead>
          <tr>
            <th v-for="col in colums">{{ col.title }}</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="row in rows">
            <td v-for="col in colums">
              <!-- ??? -->
              {{ row[col.field] }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      createApp({
        data() {
          return {
            // 表格行
            rows: [
              { id: 1, name: "张三", age: 18, gender: '男' },
              { id: 2, name: "李四", age: 20, gender: '女'},
              { id: 3, name: "王五", age: 19, gender: '不详' },
            ],

            // 表格列
            colums: [
              { id: 1, title: 'Id', field: 'id' },
              { id: 2, title: '姓名', field: 'name' },
              { id: 3, title: '年龄', field: 'age' },
              { id: 4, title: '性别', field: 'gender' }
            ],
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
